<template>
  <div>
    <div class="detaiPage">
      <div class="headerline">
        <div class="header bannercenter">
          <div class="headtitle clearfix">
            <h1><span class="title">软件教学示范</span></h1>
          </div>
        </div>
      </div>
      <div class="main">
        <video id="gnjs" style="width: 400px" controls="" controlslist="nodownload">
          <source src="https://xhycc.hnthwh.com/calligraphy/project/gnjs.mp4" type="video/mp4">
          您的浏览器不支持Video标签。
        </video>
        <video id="wzskf" style="width: 400px" controls="" controlslist="nodownload">
          <source src="https://xhycc.hnthwh.com/calligraphy/project/wzskf.mp4" type="video/mp4">
          您的浏览器不支持Video标签。
        </video>
        <video id="sfk" style="width: 400px" controls="" controlslist="nodownload">
          <source src="https://xhycc.hnthwh.com/calligraphy/project/%E4%B9%A6%E6%B3%95%E6%95%99%E5%AD%A6%E8%A7%86%E9%A2%911.mp4" type="video/mp4">
          您的浏览器不支持Video标签。
        </video>
        <video id="zjsk" style="width: 400px" controls="" controlslist="nodownload">
          <source src="https://xhycc.hnthwh.com/calligraphy/project/zjsk.mp4" type="video/mp4">
          您的浏览器不支持Video标签。
        </video>
      </div>
    </div>
    <footer-page/>
  </div>
</template>

<script>


import FooterPage from '@/layout/footer/FooterPage.vue'
import ImageNonePreview from '@/components/ImagePreview/ImageNonePreview.vue'


export default {
  name: 'SoftTeachDetail',
  components: { ImageNonePreview, FooterPage },
  methods:{
    downFile (fileUrl) {
      window.open(fileUrl, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>



.main{

  width: 760.8px;
  height: 3464.41px;
  inset: 0px;
  margin: auto;
  background: url(https://xhycc.hnthwh.com/calligraphy/project/teaching-resource.jpg) 0% 0% / 100% 100%;
  position: relative;
  #gnjs{
    position: absolute;
    top: 660px;
    left: 175px;
  }

  #wzskf{
    position: absolute;
    top: 1400px;
    left: 175px;
  }
  #sfk{
    position: absolute;
    top: 1980px;
    left: 175px;
  }

  #zjsk{
    position: absolute;
    top: 2940px;
    left: 170px;
  }
}


</style>
